<template>
	<div class="TAapp fillDiv">
		<div class="t">
			<div class="container">
				<div class="row text-center col-f">
					<h1 class="h1">一个全新的物种，一款好用的区块链APP</h1>
					<h3 class="h3">A brand new species, a good block chain APP</h3>
					<div class="row-t">
						<div class="col-xs-6">
							<div class="p">
								<span>
									<img src="../../static/img/home/syicon_app_iphonexiazai.png"/>
									ipone 版
								</span>
							</div>
							<p>最新抢鲜版体验</p>
						</div>
						<div class="col-xs-6">
							<div class="p">
								<span>
									<img src="~/static/img/home/syicon_app_androidxiazai.png"/>
									Android 版
								</span>
							</div>
							<p>最热门版下载</p>
						</div>
					</div>
				</div>
	            <div class="text-center col-f xjt" @click="isopen">
					<img  class="img-0" src="../../static/img/TAapp/icon_taappbanner_xiajiantou.png"/>
					<p class="mt20 p">专为全球5000万区块链用户打造的神器</p>
				</div>
			</div>
			<img width="100%"  src="../../static/img/bg/pic_tannetwork_banner_yuansu.png" class="bg-img"/>
		</div>
		<img width="100%" src="../../static/img/bg/pic_yemain_dituyuansu04.png" class="bg-img1"/>
	</div>
</template>

<script>
	import anime from '~/plugins/anime.js';
    import { fill } from '~/static/js/common.js';
	export default {
	    data () {
		    return {
		    }
	    },
	    mounted () {
            fill('fillDiv');
            this.ani();
	    },
	    methods : {
	       isopen(){
	       	    this.$emit('closeOpen', '1');
	       },
	       ani(){
	       	    anime.c('.h1');
//	       	    anime.e('.h3');
	       	    anime.d('.img-0');
	       }
	    }
    }
</script>

<style scoped="scoped">
	.TAapp{background: #261452;position: relative;display: table;width: 100%;}
	.TAapp .t{display: table-cell;vertical-align: middle;position: relative;z-index: 9999999;padding-bottom: 200px;}
	.t h1{background: linear-gradient(to right, #3fa3f9, #c30076);-webkit-background-clip: text;color: transparent;position: relative;left: -1920PX;}
	p.p{background: linear-gradient(to right, #3fa3f9, #c30076);-webkit-background-clip: text;color: transparent;}
	.t h3{color: #4c28a4;}
	.bg-img{position: absolute;left: 0;bottom: 20px;}
	.bg-img1{position: absolute;left: 0;top: 0px;z-index: 999999;}
	h3{padding-bottom: 20px;margin: 0 auto;}
	.p{margin: 50px auto 20px;cursor: pointer;}
	.p span{border: 2px solid #fff;color: #fff;border-radius: 6px;margin-right: 20px;font-size: 16px;display: inline-block;width: 208px;height: 45px;text-align: center;line-height: 45px;}
	.p span img{width: 20px;height: 30px;position: relative;top:-5.5px;}
	.row-t{width: 60%;margin: 0 auto;}
	.row-t p{color: #a17aff;}
	.xjt{position:absolute;font-size: 16px;z-index: 99999;width: 100%;left: 0;bottom: 150px;}
	.img-0{position: relative;left: -1920px;}
	.img-0:hover{transition:0.6s;transform-style:preserve-3d;transform:rotatex(180deg);;cursor: pointer;}
</style>
